<template>
  <view class="container">
    <!-- 状态栏占位 -->
    <view :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @click="goBack">
        <uni-icons type="left" size="20" color="#333"></uni-icons>
      </view>
      <view class="nav-title">关于我们</view>
      <view class="nav-right"></view>
    </view>

    <!-- 应用信息 -->
    <view class="app-info">
      <image class="app-logo" src="/static/logo.png" mode="aspectFit"></image>
      <view class="app-name">购物助手</view>
      <view class="app-version">版本 v2.1.0</view>
      <view class="app-slogan">让购物更简单，让生活更美好</view>
    </view>

    <!-- 公司介绍 -->
    <view class="company-section">
      <view class="section-title">
        <uni-icons type="home" size="20" color="#FF8C42"></uni-icons>
        <text>公司介绍</text>
      </view>
      <view class="company-content">
        <text>我们是一家专注于移动电商的创新科技公司，致力于为用户提供优质的购物体验。自2020年成立以来，我们始终坚持"用户至上，品质第一"的理念，不断优化产品功能，提升服务质量。</text>
      </view>
    </view>

    <!-- 核心价值 -->
    <view class="values-section">
      <view class="section-title">
        <uni-icons type="star" size="20" color="#FF8C42"></uni-icons>
        <text>核心价值</text>
      </view>
      <view class="values-grid">
        <view class="value-item">
          <uni-icons type="heart" size="32" color="#FF8C42"></uni-icons>
          <view class="value-title">用户至上</view>
          <view class="value-desc">始终将用户体验放在首位</view>
        </view>
        <view class="value-item">
          <uni-icons type="checkmarkempty" size="32" color="#FF8C42"></uni-icons>
          <view class="value-title">品质保证</view>
          <view class="value-desc">严格把控商品质量</view>
        </view>
        <view class="value-item">
          <uni-icons type="gear" size="32" color="#FF8C42"></uni-icons>
          <view class="value-title">持续创新</view>
          <view class="value-desc">不断优化产品功能</view>
        </view>
        <view class="value-item">
          <uni-icons type="staff" size="32" color="#FF8C42"></uni-icons>
          <view class="value-title">贴心服务</view>
          <view class="value-desc">提供专业的客户服务</view>
        </view>
      </view>
    </view>

    <!-- 发展历程 -->
    <view class="timeline-section">
      <view class="section-title">
        <uni-icons type="calendar" size="20" color="#FF8C42"></uni-icons>
        <text>发展历程</text>
      </view>
      <view class="timeline">
        <view class="timeline-item">
          <view class="timeline-dot"></view>
          <view class="timeline-content">
            <view class="timeline-year">2024年</view>
            <view class="timeline-event">用户突破100万，推出AI智能推荐功能</view>
          </view>
        </view>
        <view class="timeline-item">
          <view class="timeline-dot"></view>
          <view class="timeline-content">
            <view class="timeline-year">2023年</view>
            <view class="timeline-event">获得B轮融资，业务覆盖全国主要城市</view>
          </view>
        </view>
        <view class="timeline-item">
          <view class="timeline-dot"></view>
          <view class="timeline-content">
            <view class="timeline-year">2022年</view>
            <view class="timeline-event">推出移动端APP，注册用户达到50万</view>
          </view>
        </view>
        <view class="timeline-item">
          <view class="timeline-dot"></view>
          <view class="timeline-content">
            <view class="timeline-year">2021年</view>
            <view class="timeline-event">完成A轮融资，团队扩展至100人</view>
          </view>
        </view>
        <view class="timeline-item">
          <view class="timeline-dot"></view>
          <view class="timeline-content">
            <view class="timeline-year">2020年</view>
            <view class="timeline-event">公司成立，推出第一版产品</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 联系信息 -->
    <view class="contact-section">
      <view class="section-title">
        <uni-icons type="location" size="20" color="#FF8C42"></uni-icons>
        <text>联系我们</text>
      </view>
      <view class="contact-info">
        <view class="contact-item">
          <uni-icons type="home" size="20" color="#FF8C42"></uni-icons>
          <view class="contact-detail">
            <view class="contact-label">公司地址</view>
            <view class="contact-value">北京市朝阳区科技园区创新大厦A座18层</view>
          </view>
        </view>
        <view class="contact-item">
          <uni-icons type="phone" size="20" color="#FF8C42"></uni-icons>
          <view class="contact-detail">
            <view class="contact-label">客服热线</view>
            <view class="contact-value">400-888-8888</view>
          </view>
        </view>
        <view class="contact-item">
          <uni-icons type="email" size="20" color="#FF8C42"></uni-icons>
          <view class="contact-detail">
            <view class="contact-label">邮箱地址</view>
            <view class="contact-value">contact@example.com</view>
          </view>
        </view>
        <view class="contact-item">
          <uni-icons type="earth" size="20" color="#FF8C42"></uni-icons>
          <view class="contact-detail">
            <view class="contact-label">官方网站</view>
            <view class="contact-value">www.example.com</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 法律信息 -->
    <view class="legal-section">
      <view class="section-title">
        <uni-icons type="paperplane" size="20" color="#FF8C42"></uni-icons>
        <text>法律信息</text>
      </view>
      <view class="legal-links">
        <view class="legal-item" @click="openLegal('privacy')">
          <text>隐私政策</text>
          <uni-icons type="right" size="14" color="#999"></uni-icons>
        </view>
        <view class="legal-item" @click="openLegal('terms')">
          <text>用户协议</text>
          <uni-icons type="right" size="14" color="#999"></uni-icons>
        </view>
        <view class="legal-item" @click="openLegal('copyright')">
          <text>版权声明</text>
          <uni-icons type="right" size="14" color="#999"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 版权信息 -->
    <view class="copyright">
      <text>© 2024 购物助手 All Rights Reserved</text>
      <text>京ICP备12345678号-1</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const statusBarHeight = ref(0);

// 获取状态栏高度
const getStatusBarHeight = () => {
  try {
    // @ts-ignore
    const systemInfo = uni.getSystemInfoSync();
    statusBarHeight.value = systemInfo.statusBarHeight || 0;
  } catch (e) {
    statusBarHeight.value = 0;
  }
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 打开法律文档
const openLegal = (type) => {
  const titles = {
    privacy: '隐私政策',
    terms: '用户协议',
    copyright: '版权声明'
  };
  
  uni.showToast({
    title: `正在打开${titles[type]}`,
    icon: 'none'
  });
};

onMounted(() => {
  getStatusBarHeight();
});
</script>

<style>
.container {
  background-color: #FFF9F2;
  min-height: 100vh;
  padding-bottom: 50rpx;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #FFE6CC;
}

.nav-left, .nav-right {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.app-info {
  background: linear-gradient(to right, #FF8C42, #FF9F1C);
  margin: 20rpx;
  border-radius: 16rpx;
  padding: 50rpx 30rpx;
  text-align: center;
  color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(255, 140, 66, 0.2);
}

.app-logo {
  width: 120rpx;
  height: 120rpx;
  border-radius: 24rpx;
  background-color: #fff;
  margin: 0 auto 20rpx;
}

.app-name {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.app-version {
  font-size: 24rpx;
  opacity: 0.9;
  margin-bottom: 20rpx;
}

.app-slogan {
  font-size: 26rpx;
  opacity: 0.9;
  line-height: 1.5;
}

.company-section, .values-section, .timeline-section, .contact-section, .legal-section {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 25rpx;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.section-title text {
  margin-left: 10rpx;
}

.company-content {
  font-size: 26rpx;
  line-height: 1.8;
  color: #666;
}

.values-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.value-item {
  width: calc(50% - 10rpx);
  text-align: center;
  padding: 30rpx 20rpx;
  background-color: #FFF9F2;
  border-radius: 12rpx;
  border: 1rpx solid #FFE6CC;
}

.value-title {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  margin: 15rpx 0 10rpx;
}

.value-desc {
  font-size: 22rpx;
  color: #666;
  line-height: 1.5;
}

.timeline {
  position: relative;
  padding-left: 40rpx;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 20rpx;
  top: 0;
  bottom: 0;
  width: 2rpx;
  background-color: #FFE6CC;
}

.timeline-item {
  position: relative;
  margin-bottom: 30rpx;
}

.timeline-dot {
  position: absolute;
  left: -30rpx;
  top: 8rpx;
  width: 16rpx;
  height: 16rpx;
  background-color: #FF8C42;
  border-radius: 50%;
  border: 3rpx solid #fff;
  box-shadow: 0 0 0 2rpx #FFE6CC;
}

.timeline-year {
  font-size: 24rpx;
  color: #FF8C42;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.timeline-event {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}

.contact-info {
  border-top: 1rpx solid #FFE6CC;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #FFE6CC;
}

.contact-detail {
  margin-left: 15rpx;
  flex: 1;
}

.contact-label {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 5rpx;
}

.contact-value {
  font-size: 26rpx;
  color: #333;
  line-height: 1.5;
}

.legal-links {
  border-top: 1rpx solid #FFE6CC;
}

.legal-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #FFE6CC;
  font-size: 26rpx;
  color: #333;
}

.copyright {
  text-align: center;
  padding: 30rpx 20rpx;
  color: #999;
  font-size: 22rpx;
  line-height: 1.8;
}
</style>
